<!--
 * @Description: 
 * @Date: 2020-12-21 18:24:23
 * @LastEditors: lother
 * @LastEditTime: 2021-01-11 13:58:01
 * @FilePath: \AccountOpening-H5\src\views\download\index.vue
-->
<template>
  <div>
    <!-- <l-header :sliderShow="false"></l-header> -->
    <div class="downlaodPage">
      <img class="ImgLogo" :src="downloadList.downloadLogoH5" alt="" />
      <img class="phone" :src="downloadList.downloadBackH5" alt="" />
      <div class="bottomImg">
        <a :href="downloadList.downloadIos" target="_blank">
          <img src="@/assets/img/download3.png" alt="" />
        </a>
        <a :href="downloadList.downloadAndroid" target="_blank">
          <img src="@/assets/img/download2.png" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import { download } from '@/api/common'
export default { 
  data() {
    return {
      app_name:{},
      downloadList:{},
    };
  },
  mounted(){
    this.download()
  },
  methods: {
    download(){
      download()
      .then(res=>{
        this.app_name = res.data.app_name;
        this.downloadList = res.data.download;
      })
    }
  },
};
</script>
<style lang="less" scoped>
.downlaodPage {
  text-align: center;
  background: url("~@/assets/img/download5.png") no-repeat center center;
  background-size: 100%;
  background-position: center;
  .ImgLogo {
    max-width: 3.22rem;
    margin: 1.4rem 0;
  }
  .phone {
    width: 100%;
  }
  .bottomImg {
    width: 70%;
    margin: 0 auto;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      display: block;
      max-width: 2.1rem;
      margin: 0.2rem 0;
    }
  }
}
</style>